<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="__PUBLIC__/member/style/common.css" media="screen"/>
        <script type="text/javascript" src="__PUBLIC__/common/js/jquery.js"></script>
        <script type="text/javascript" src="__PUBLIC__/common/js/common.js"></script>
        <script type="text/javascript">
            $(function(){
                $(".spot_box").click(function(){
                    var me_file = $(this).data("file");
                    var me_id = $(this).data("id");
                    var me_w = $(this).data("w");
                    var me_h = $(this).data("h");
                    var me_len = $(this).data("len");
                    parent.getmoveSpot(me_id,me_file,me_w,me_h,me_len);
                });

                $(".spot_cube").mouseover(function(){
                    var temp = $(this).children(".movebox");
                    var w = temp.data("w");
                    var h = temp.data("h");
                    var len = temp.data("len");
                    var n = temp.data("n");
                    var sp = temp.data("speed");
                    $("body").stopTime("move");
                    $("body").everyTime(sp+"ms","move",function(){
                        n = temp.data("n");
                        n++;
                        if(n==len){
                            n=0;
                        }
                        mv_h = -n*h;
                        temp.children("img").css("marginTop",mv_h+"px");
                        temp.data("n",n);
                    });
                });
                $(".spot_cube").mouseout(function(){
                    $("body").stopTime("move");
                });
            });
        </script>
        <style>
            body{
                background: #f8f8f8;
            }
            .pick_btnbox{
                width: auto; height: 30px; margin: 12px 16px 4px 16px; overflow: hidden;
                font: bold 12px/30px "微软雅黑"; color: #199372; cursor: default;
            }
            .pick_top{
                width: auto; height: 24px; margin: 4px 24px 4px 24px; overflow: hidden;
                font: bold 12px/24px "微软雅黑"; color: #199372; cursor: default;
            }
            .pick_down{
                min-height: 340px; width: 680px; overflow: hidden; margin: 0 15px; border:1px solid #bbb;
                background: #fff; border-radius: 4px; padding: 4px;
            }
            .spot_box{
                width: 162px; height: 162px; overflow: hidden; border:1px solid #c6c6c6; background: #f3f3f3;
                float: left; margin: 3px; border-radius: 4px; border-bottom: 1px solid #bbb; cursor: pointer;
            }
            .spot_cube{
                width: 150px; height: 150px; overflow: hidden; background: url(__PUBLIC__/member/images/common/psbg.png) #fff;
                border:1px solid #c6c6c6; margin-top: 5px; margin-left: 5px;
            }
            .spot_box:hover{
                border-color: #4f94d9; background: #e0f7ff;
            }
            .spot_box:hover .spot_cube{
                border-color: #4f94d9;
            }
            .pick_page{
                width: auto; height: 30px; margin: 0px 20px 4px 20px; overflow: hidden;
            }
            .pickbuttom{
                width: 100px; height: 28px; overflow: hidden; border:1px solid #bbb; background: #fff; cursor: pointer;
                text-align: center; font: bold 12px/30px "微软雅黑"; color: #666; float: left; margin-right: 6px; display: block;
            }
            .pickbuttom:hover{
                text-decoration: none;
            }
            .pickbuttom.me{
                width: 100px; height: 28px; overflow: hidden; border:1px solid #4f94d9; background: #e0f7ff; cursor: pointer;
                text-align: center; font: bold 12px/30px "微软雅黑"; color: #4f94d9; float: left; margin-right: 6px;
            }
            .movebox{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="pick_btnbox">
            <a href="{:U('movespot',array('sp'=>1))}" class="pickbuttom">系统默认热点</a>
            <a href="{:U('movespot',array('sp'=>2))}" class="pickbuttom">我上传的热点</a>
        </div>
        <script type="text/javascript">$(".pickbuttom").eq({$sp}-1).addClass("me");</script>
        <div class="pick_top">提示：点击下方热点，即可选择生效。</div>
        <div class="pick_down">
            <volist name="list" id="spot">
                <div class="spot_box" data-file="{$spot.file}" data-id="{$spot.id}" data-w="{$spot.width}" data-h="{$spot.height}" data-len="{$spot.len}">
                    <div class="spot_cube"><div class="movebox" data-w="{$spot.width}" data-h="{$spot.height}" data-len="{$spot.len}" data-n="0" data-speed="{$spot.speed}" style="width: {$spot.width}px; height: {$spot['height']}px; margin-left: {$spot['width']*(-1)/2+75}px; margin-top: {$spot['height']*(-1)/2+75}px;"><img src="{:CC('web_root')}{$spot.file}" /></div></div>
                </div>
            </volist>
        </div>
        <div class="pick_page">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" align="center">
                <tr  class="tr_white" align="center">
                    <td id="page_list" height="40" style="padding: 0px 10px;">
                        {$page}
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>
